<template>
  <div style="display: flex;flex-direction: column;gap: 10px">
    <t-row >
    </t-row>
    <t-row align="stretch" :gutter="[16, 16]">
      <t-col :xs="12" :xl="6">
        <t-card title="平台类别"  >
          <chart-view @click="(data)=>{clickToIndex(data,'platformCategory')}" :chartOption="chartOpt3" :autoResize="false" height="326px"/>
        </t-card>
      </t-col>
      <t-col :xs="12" :xl="6">
        <t-card title="平台研究方向"  >
          <chart-view  @click="(data)=>{clickToIndex(data,'researchDirection')}" :chartOption="chartOpt5" :autoResize="false" height="326px"/>
        </t-card>
      </t-col>
    </t-row>
    <t-row align="stretch" :gutter="[16, 16]">
      <t-col :xs="12" :xl="6">
        <t-card title="平台级别"  class="dashboard-rank-card">
          <chart-view  @click="(data)=>{clickToIndex(data,'platformLevel')}"  :chartOption="chartOpt4" :autoResize="false" height="326px"/>
        </t-card>
      </t-col>
      <t-col :xs="12" :xl="6">
        <t-card title="年度曲线图" >
          <t-tabs :defaultValue="1"  @change="(val)=>{ getMapByYear(val) }">
              <t-tab-panel :value="index+1" v-for="(item,index) in yearTabs" :key="index" :label="item">
                <chart-view :chartOption="chartOpt6"
                            :autoResize="false" height="326px"/>
              </t-tab-panel>
          </t-tabs>

        </t-card>
      </t-col>

    </t-row>
    <t-row align="stretch" :gutter="[16, 16]">
      <t-col :xs="12" :xl="6">
        <t-card title="单位申报排名" class="dashboard-rank-card">
          <t-table  hover :data="deptRankData" :columns="deptRankColumns" rowKey="departmentId">
            <template #id="{ rowIndex }">
            <span :class="getRankClass(rowIndex)">
              {{ rowIndex + 1 }}
            </span>
            </template>
          </t-table>
        </t-card>
      </t-col>
      <t-col :xs="12" :xl="6">
        <t-card title="平台投入前10排名"  class="dashboard-rank-card">
          <t-tabs :defaultValue="1"  @change="(val)=>{ getInputRanking(val) }">
            <t-tab-panel :value="index+1" v-for="(item,index) in yearTabs" :key="index" :label="item">
              <t-table hover :data="totalBudget" :columns="totalBudgetColumns" rowKey="id">
                <template #id="{ rowIndex }">
            <span :class="getRankClass(rowIndex)">
              {{ rowIndex + 1 }}
            </span>
                </template>
              </t-table>
            </t-tab-panel>
          </t-tabs>
        </t-card>
      </t-col>
    </t-row>
    <project-detail-dialog :header="dialog.header" :objId="dialog.objId" :visible.sync="dialog.open_project_detail"
                           v-if="dialog.open_project_detail"></project-detail-dialog>
  </div>
</template>
<script lang="jsx">
import ProjectDetailDialog from "../kjxm/pm/components/project-detail-dialog.vue";

export default {
  name: "home",
  components: {
    ProjectDetailDialog
  },
  data() {
    return {
      value:1,
      value2:1,
      chartOpt6: {},
      site_tag: import.meta.env.VITE_SITE_TAG,
      resizeTime: 1,
      currentMonth: "",
      declarationsNum: 0,
      releaseNum: 0,
      implementNum: 0,
      chartOpt: {},
      chartOpt2: {},
      chartOpt3: {},
      chartOpt4: {},
      chartOpt5: {},
      dialog: {
        open_project_detail: false,
        open_approve_list: false,
        header: "",
        objId: 0
      },
      panelList: [],
      deptRankData: [],
      totalBudget:[],
      countData:[],
      totalBudgetColumns:[
        {
          colKey: "id",
          title: "排行",
          align: "center",
        },
        {
          colKey: "name",
          title: "平台名称",
          align: "center",
          width: 180
        },
        {
          colKey: "totalBudget",
          title: "总投入（万元）",
          align: "center",
        },
      ],
      deptRankColumns: [
        {
          colKey: "id",
          title: "排行",
          align: "center",
        },
        {
          colKey: "deptName",
          title: "单位名称",
          align: "center",
          width: 180
        },
        {
          colKey: "projectCount",
          title: "申报个数",
          align: "center",
        },
      ],
      countColumns:[
        {
          colKey: "id",
          title: "排行",
          align: "center",
        },
        {
          colKey: "name",
          title: "平台名称",
          align: "center",
          width: 180
        },
        {
          colKey: "count",
          title: "数量",
          align: "center",
        },
      ],
      projectData: [],
      projectColumns: [
        // {
        //   colKey: "id",
        //   title: "项目编号",
        //   align: "center",
        //   ellipsis: true
        // },
        {
          colKey: "projectName",
          title: "项目名称",
          align: "center",
          // ellipsis: (h, { row }) => <div>{row.projectName}</div>,
          ellipsisTitle: false,
          width: 300,
        },
        {
          colKey: 'declareDeptName',
          title: '申报单位',
          align: 'center',
          width: 180
        },
        {
          colKey: 'declareDate',
          title: '申报日期',
          align: 'center',
          width: 120
        },
        {
          colKey: "projectStatus",
          title: "项目状态",
          align: "center",
          width: 220,
        },
      ],
      yearTabs:[
        '按立项时间',
        '按每年投入的金额',
        '投入设备数量',
        '投入场地面积',
        '仪器设备总价值',
        '研发人员投入总数',
        '承担项目',
      ],
      rankTabs:[
        '按每年投入的金额',
        '投入设备数量',
        '投入场地面积',
        '仪器设备总价值',
        '研发人员投入总数',
        '承担项目',
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectCategory: '',
        projectName: '',
        projectType: '',
        subjectClassification: '',
        dateRange: []
      },
    }
  },
  created() {
    this.getByPlatformLevel()
    this.getByResearchDirection()
    this.getByPlatformCategory()
    this.getMapByYear('1')
    this.getDeptProjectRanking()
    this.getInputRanking('1')
  },
  methods: {
    clickToIndex(data,param){
      const query = {}
      query[param] = data.data.lableValue
      this.$router.push({
        path:'/kjpt/platform/platform-index',
        query
      })
    },
    getRankClass(index) {
      return ['dashboard-rank__cell', { 'dashboard-rank__cell--top': index < 3 }];
    },
    getInputRanking(type){
      this.$api.kjpt.home.getInputRanking(type).then(response => {
        this.totalBudget = response.data
      })
    },
    getDeptProjectRanking(){
      this.$api.kjpt.home.getDeptProjectRanking().then(response => {
        this.deptRankData = response.data
      })
    },
    getByPlatformCategory() {
      this.$api.kjpt.home.getByPlatformCategory().then(response => {
        const data = [];
        response.data.forEach(val => {
          data.push({
            ...val,
            name: val.label
          })
        })
        this.chartOpt3 = this.$eChartFn.getPieChart(data);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getByPlatformLevel() {
      this.$api.kjpt.home.getByPlatformLevel().then(response => {
        const data = [];
        response.data.forEach(val => {
          data.push({
            ...val,
            name: val.label
          })
        })
        this.chartOpt4 = this.$eChartFn.getPieChart(data);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getByResearchDirection() {
      this.$api.kjpt.home.getByResearchDirection().then(response => {
        const data = [];
        response.data.forEach(val => {
          data.push({
            ...val,
            name: val.label
          })
        })
        this.chartOpt5 = this.$eChartFn.getPieChart(data);
        // this.chartOpt = this.$eChartFn.getBarChart(Object.keys(response.data),Object.values(response.data));
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getMapByYear(type) {
      this.$api.kjpt.home.getMapByYear(type).then(response => {
        const resData = response.data
        const xAxis = []
        const yAxis = []
        resData.forEach(item=>{
          yAxis.push(item.count)
          xAxis.push(item.year)
        })
        this.chartOpt6 = this.$eChartFn.getLineChart(xAxis,yAxis);
      })
    },
  }
}
</script>

<style lang="less" scoped>
.card {
  border: 1px solid var(--td-component-border);
  border-radius: var(--td-radius-medium);
  background-color: var(--td-bg-color-container);
  padding: 10px 10px;

  .header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px 10px;
    position: relative;

    .title {
      font: var(--td-font-title-medium);
      color: var(--td-text-color-primary);
      margin-right: var(--td-comp-margin-l);
      word-break: break-all;
    }
  }
}

@import '@/style/variables.less';
.dashboard-rank-card {
  height: 100%;
}

.dashboard-rank__cell {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: white;
  font-size: 14px;
  background-color: @gray-color-5;
  align-items: center;
  justify-content: center;
  font-weight: 700;

  &--top {
    background: @brand-color;
  }
}
</style>
